import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useVocabulary } from '@/contexts/VocabularyContext';
import PetTab from '@/components/achievement/PetTab';
import AchievementTab from '@/components/achievement/AchievementTab';

export default function AchievementPage() {
  const navigate = useNavigate();
  const { userProgress } = useVocabulary();
  const [activeTab, setActiveTab] = useState('pets');

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
      {/* 顶部导航栏 */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-4">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => navigate('/')}
                className="hover:bg-gray-100"
              >
                <ArrowLeft className="h-5 w-5" />
              </Button>
              <div>
                <h1 className="text-xl font-bold text-gray-900">成就系统</h1>
                <p className="text-sm text-gray-500">查看你的学习成就和可爱宠物</p>
              </div>
            </div>
            
            {/* 经验值显示 */}
            <div className="flex items-center gap-6">
              <div className="text-right">
                <p className="text-sm text-gray-500">总经验值</p>
                <p className="text-lg font-bold text-purple-600">{userProgress.totalExperience}</p>
              </div>
              <div className="text-right">
                <p className="text-sm text-gray-500">可用经验值</p>
                <p className="text-lg font-bold text-green-600">{userProgress.availableExperience}</p>
              </div>
              <div className="text-right">
                <p className="text-sm text-gray-500">已学单词</p>
                <p className="text-lg font-bold text-blue-600">{userProgress.totalWordsLearned}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-8">
            <TabsTrigger value="pets" className="text-lg">
              🐾 宠物
            </TabsTrigger>
            <TabsTrigger value="achievements" className="text-lg">
              🏆 成就
            </TabsTrigger>
          </TabsList>

          <TabsContent value="pets" className="mt-0">
            <PetTab />
          </TabsContent>

          <TabsContent value="achievements" className="mt-0">
            <AchievementTab />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
